<script setup lang="ts">
import { ref } from "vue";
import Modal from "@/components/block/modal.vue";
//弹窗测试

const props = defineProps<{
  active: boolean;
  site: string;
  title: string;
}>();


const ifarmActive = ref(props.active);

//弹窗按钮
const clickActive = () => {
  ifarmActive.value = !ifarmActive.value;
};
</script>
<template>
  <div>
    <span>沉浸阅读</span>

    <!--弹窗内容-->

    <Modal v-show="active" :clickActive="clickActive">
      <template #header> {{ title }} </template>
      <div class="iframe_box">
        <iframe width="100%" frameborder="no" :src="site" allowfullscreen>
        </iframe>
      </div>
    </Modal>
  </div>
</template>
<style scoped lang="less">
.iframe_box {
  position: relative;
  overflow: hidden;
  padding-bottom: 82vh;
}

iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
</style>
